<template>
  <div class="wrap-container sn-container"> 
    <div class="sn-content"> 
      <div class="sn-title">设备状态总览</div> 
      <div class="sn-body" style="bottom: 20px"> 
        <div class="wrap-container body">
          <!-- <div v-for="(item,index) in listData" :key="index" class="part">
            <div class="title" :style="{'color':color[index]}">{{item.status}}:</div>
            <div class="line" :style="{'background-color':color[index],width:item.count*5+'px'}"></div>
            <div class="DIGITALDREAMFAT">{{item.count}}</div>
          </div> -->

          <div class="chartsdom" id="chart_deviceStatus"></div>
          
        </div> 
      </div> 
    </div>   
  </div>
</template>

<script>
import echarts from 'echarts'
export default {
  name: "deviceStatus",
  components: {
    
  },
  data() {
    return {
      color:['rgba(14,109,236','rgba(255,168,17' , '#818384', 'rgba(218,111,227'],
      listData: [
        { count: 1,status:'正常'},
        { count: 2,status:'告警'},
        { count: 7,status:'离线'},
        { count: 9,status:'未注册'},
      ]
    }
  },
  created() {
    
  }, 
    mounted() {
    this.getEchartLeft1();
  },
  methods: {
    getEchartLeft1() {
      // 实例化对象
      let myChart = echarts.init(document.getElementById('chart_deviceStatus'));
      let charts = { // 按顺序排列从大到小
        cityList: ['正常', '告警', '离线', '未注册'],
        cityData: [1, 2, 7, 9]
      }

      let top10CityList = charts.cityList;
      let top10CityData = charts.cityData;
      let color = ['rgba(14,109,236', 'rgba(255,168,17', 'rgba(100,255,249', 'rgba(218,111,227'];

      let lineY = [];
      for (let i = 0; i < charts.cityList.length; i++) {
        let x = i
        if (x > color.length - 1) {
          x = color.length - 1
        }
        let data = {
          name: charts.cityList[i],
          color: color[x] + ')',
          value: top10CityData[i],
          itemStyle: {
            normal: {
              show: true,
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                offset: 0,
                color: color[x] + ', 0.6)'
              }, {
                offset: 1,
                color: color[x] + ', 1)'
              }], false),
              barBorderRadius: 10
            },
            emphasis: {
              shadowBlur: 15,
              shadowColor: 'rgba(0, 0, 0, 0.1)'
            }
          }
        }
        lineY.push(data)
      }  

      // 指定配置和数据
      let option = {
        color: color,
        tooltip: {
          trigger: 'item',
        },
        grid: {
          borderWidth: 0,
          top: '5%',
          left: '2%',
          right: '2%',
          bottom: '0%',
          containLabel: true
        },
        xAxis: [{
          type: 'value',
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          splitLine: {
            show: false
          },
          axisLabel: {
            show: false
          }
        }],
        yAxis: [{
          type: 'category',
          inverse: true,
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            show: true,
            inside: false,
            textStyle: {
              color: '#b3ccf8',
              fontSize: 16
            },
          },
          data: top10CityList
        }, {
          type: 'category',
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: true,
            inside: false,
            textStyle: {
              color: '#b3ccf8',
              fontSize: 16,
              fontFamily: 'DIGITALDREAMFAT'

            },
            formatter: (val) => {
              return `${val}`
            }
          },
          splitArea: {
            show: false
          },
          splitLine: {
            show: false
          },
          data: top10CityData.reverse()
        }],
        series: [{
          name: '',
          type: 'bar',
          zlevel: 2,
          barWidth: '10px',
          data: lineY,
          animationDuration: 1500,
          label: {
            normal: {
              color: '#b3ccf8',
              show: false,
              position: [0, '-15px'],
              textStyle: {
                fontSize: 13
              },
              formatter: (a, b) => {
                return a.name;
              }
            }
          }
        }]
      };

      // 把配置给实例对象
      myChart.setOption(option, true);
      window.addEventListener('resize', () => {
        myChart.resize();
      });
    },
  },
};
</script>

<style lang="less" scoped>
@font-face {
font-family: 'DIGITALDREAMFAT';
src: url('../../../assets/ttf/DIGITALDREAMFAT.ttf');
}
 
.DIGITALDREAMFAT {
    font-family: 'DIGITALDREAMFAT';
    letter-spacing: 5px;
    margin-left: 20px;
}
// .body {
//   padding: 20px;
//   box-sizing: border-box;
//   display: flex;
//   flex-direction: column;
//   justify-content: space-around;
// }
// .part {
//   width: 100%;
//   font-size: 24px;
//   margin-bottom: 10px;
//   display: flex;
//   color: #fff;
//   .title {
//     width: 100px;
//     text-align: right;
//   }
// }
.chartsdom {
    width: 100%;
    height: 95%;
  }
</style>
